<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: red;
            width: 200px;
            height: 200px;
        }

        .s {
            font-size: 30px;
        }

        .btn {
            border: none;
            outline: none;
            background-color: pink;

        }

        .btnSize {
            font-size: 60px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-bind:属性="表达式" -->
        <!-- v-bind:class 对象 或者 数组 -->

        <!-- 对象语法 -->
        <div v-bind:class="classObj" @click="isBox =!isBox">hello class binding</div>
        <button @click="isSize =!isSize">{{isSize}}</button>
        <button v-bind:class="{btn:isBtn,btnSize:isBtnSize}" @click="isBtn =!isBtn">btn</button>
        <!-- 数组语法  v-bind: 语法糖 : -->
        <!-- ['类名',三元表达式,{类名:布尔值}] -->
        <button :class="['btn',{btnSize:isBtnSize}]">btn2</button>

        <div class="box" :class="{s:isBox}">类绑定和静态类可以同时存在</div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs, watchEffect, computed } = Vue;
        createApp({
            setup() {
                const isBox = ref(true)
                const isSize = ref(true)
                const isBtn = ref(true)
                const isBtnSize = ref(true)
                const classObj = reactive({
                    // key:value
                    // key是类名
                    // value是布尔值
                    // 只有当value为true时，才会添加类名
                    // 否则，会移除类名
                    box: isBox,
                    s: isSize
                })

                return {
                    // ...toRefs(classObj),
                    classObj,
                    isBox,
                    isSize,
                    isBtn,
                    isBtnSize
                }


            }
        }).mount('#app')
    </script>
</body>

</html>